.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 700;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  &--primary {
    background-color: $colorBlack;
    color: $colorWhite;
    border: 3px solid $colorBlack;

    &:hover {
      color: $colorYellow;
    }
  }

  &--secondary {
    background-color: $colorWhite;
    color: $colorBlack;
    border: 3px solid $colorBlack;

    &:hover {
      color: $colorBlack;
      background-color: $colorYellow;
    }
  }

  &--tertiary {
    padding-left: 0;
    padding-right: 0;
  }

  &--tertiary &__icon {
    opacity: 0.3;
  }

  &--tertiary:hover &__icon {
    opacity: 1;
  }

  &__icon {
    transition: opacity 0.2s $ease;

    &:first-child {
      margin-right: 0.5rem;
    }

    &:last-child {
      margin-left: 0.5rem;
    }
  }
}
